<!--
* Copyright 2016 LinkedIn, Inc
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
-->

<!doctype html>

<meta charset="utf-8"/>
<title>ParSeq Heap Trace Extractor</title>

<link rel="shortcut icon" href="img/icon.png">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

<style>
.btnCenter {
  margin: 0 50%;
}

textarea {
  width: 760px;
}

textarea.error {
  color: red;
}


</style>

<div class="container-fluid" id="app-container">
  <div class="row-fluid">
    <div class="page-header label label-info">
      <h4 style="text-align: center;">ParSeq Heap Trace Extractor</h4>
    </div>
  </div>
  <div class="row-fluid">
    <p>
    Start <a href="https://docs.oracle.com/javase/8/docs/technotes/tools/unix/jhat.html"><b>jhat</b></a> tool. Jhat is part of JDK and it starts HTTP server. Paste below it's location.
    Give jhat a lot of memory e.g.
    <div style="font-family:monospace">
    jhat -J-Xmx12g -J-Xms12g heapdump.out
    </div>
    </p>
  </div>

  <div class="row-fluid">
    <form action="javascript:extractTraces();">
      <fieldset>
        <div class="span10">
          <input type="text" id="location" placeholder="jhat's HTTP server location e.g. http://jodzga-mn4:7000" spellcheck="false" class="form-control span12"></input>
        </div>
        <div class="span2">
          <button type="submit" id="submit" class="btn">Extract ParSeq Traces</button>
        </div>
      </fieldset>
    </form>
    <hr/>
  </div>

</div>

<div id="resultView" class="row-fluid"></div>


<form id="post_link_form" action="" method="POST" target="_blank">
  <input id="post_link_content" type="hidden" name="trace" value=""/>
</form>

<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/spin.min.js"></script>
<script src="js/jquery.spin.js"></script>

<script>

  var extractedTraces;

  function extractTraces() {
    if ($('#location').val() === '') {
      alert('Enter jhat location');
    } else {
      $('#resultView').spin()
      $.getJSON("/jhat", { location: $('#location').val() }, function (data) {
          extractedTraces = data;
          $('#resultView').html(
              "<ol>\n" +
                data.map(function(trace, i) {
                  return "<li><a href='trace.html' class='post_link' index='" + i + "'>Plan '" + trace.planClass + "' with id "
                    + trace.planId + ", "
                    + trace.traces.length + " tasks</a></li>\n";
                }).join("") +
              "</ol>\n"
          );
          $('a.post_link').click(function () {
            $('#post_link_content').val(JSON.stringify(extractedTraces[this.getAttribute('index')]));
            $('#post_link_form').attr('action', this.href).submit();
            return false;
          });
        })
        .fail(function(data) {
          $('#resultView').html("<pre>" + data.responseText + "</pre>");
        })
        .always(function() {
          $('#resultView').spin(false)
        });
    }
  }
</script>
